<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-14 10:55:50
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-15 17:18:51
 * @FilePath: /mycim4-oms-ui/src/components/Query/components/query-item.vue
 * @Description: 筛选项
-->
<template>
  <div class="query-item">
    <!-- input -->
    <el-input
      v-if="config.type === 'input'"
      v-model="value"
      v-bind="config.attr"
      @input="emitValue"
    />
    <!-- select -->
    <el-select
      v-else-if="config.type === 'select'"
      v-model="value"
      v-bind="config.attr"
      @change="emitValue"
    >
      <el-option
        v-for="item in config.options"
        :key="(item.value as any)"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- table select -->
    <TableSelect
      v-else-if="config.type === 'tableSelect'"
      v-model="value"
      v-bind="config.attr"
      :columns="config.columns"
      @change="emitValue"
    />
    <el-radio-group
      v-else-if="config.type === 'radio'"
      v-model="value"
      @change="emitValue"
    >
      <el-radio
        v-for="item in config.options"
        :key="(item.value  as any)"
        :label="(item.value as any)"
      >
        {{ item.label }}
      </el-radio>
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import TableSelect from "@/components/TableSelect/index.vue";
import type { ItemProps } from "../types";

defineOptions({
  name: "QueryItem"
});

const props = withDefaults(defineProps<ItemProps>(), {});

//#region emit
interface Emits {
  (e: "change", ...args: any[]): void;
  (e: "update:modelValue", val: any): void;
}
const emit = defineEmits<Emits>();
//#endregion

const value = computed({
  get() {
    return props.modelValue;
  },
  set(val: any) {
    emit("update:modelValue", val);
  }
});

// 如果有 设置默认值
value.value = props.config.defaultValue ? props.config.defaultValue : null;

const emitValue = (val: string | number) => {
  emit("change", props.config.field, val);
};
</script>

<style lang="scss" scoped>
.query-item {
  width: 100%;

  .el-select {
    width: 100%;
  }

  .el-radio-group {
    width: 100%;

    :deep(.el-radio) {
      margin-right: 10px;

      .el-radio__label {
        font-weight: 400;
        color: #333;
      }
    }
  }
}
</style>
